<template>
  <div class="box1">操作2</div>
  <div class="box">操作1</div>
</template>
<script>
export default {
  data() {
    return {}
  },
  methods: {
    add() {}
  }
}
</script>
<style type="text/css">
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  //transform: translate(100px, 0) rotate(30deg) translate(-100px, 0);
  position: absolute;
  left: 100px;
  top: 100px;
  animation: move 5s linear forwards;
  background: #fff;
}
.box1 {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  //transform: translate(100px, 0) rotate(30deg) translate(-100px, 0);
  position: absolute;
  background: #fff;
  left: 100px;
  top: 100px;
}
@keyframes move {
  0% {
    transform: translate(0, 0);
  }
  33.3% {
    transform: translate(100px, 0);
  }
  66.6% {
    transform: translate(100px, 0) rotate(30deg);
  }
  100% {
    transform: translate(100px, 0) rotate(30deg) translate(-100px, 0);
  }
}
</style>
